---
title: Popover
description: An accessible popup anchored to a button.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-base-popover" />

## Installation

<ComponentInstallation name="components-base-popover" />

## Usage

```tsx
<Popover>
  <PopoverTrigger>Open popover</PopoverTrigger>
  <PopoverPanel>
    <div>Popover panel</div>
  </PopoverPanel>
</Popover>
```

## API Reference

### Popover

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/popover#popover"
  text="Animate UI API Reference - Popover Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/popover#root"
  text="Base UI API Reference - Popover.Root"
/>
</div>

### PopoverTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/popover#popovertrigger"
  text="Animate UI API Reference - Popover Trigger Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/popover#trigger"
  text="Base UI API Reference - Popover.Trigger"
/>
</div>

### PopoverPanel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/popover#popoverpositioner"
  text="Animate UI API Reference - Popover Positioner Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/popover#positioner"
  text="Base UI API Reference - Popover.Positioner"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the popover panel.',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 300, damping: 25 }",
    },
    '...props': {
      description: 'The props of the popover panel.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `forceMount` and `asChild` properties are not supported in the
  `PopoverPanel` component, as it is used for animation.
</Callout>

### PopoverClose

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/popover#popoverclose"
  text="Animate UI API Reference - Popover Close Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/popover#close"
  text="Base UI API Reference - Popover.Close"
/>
</div>

## Credits

- [Base UI Popover](https://base-ui.com/react/components/popover)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/popover) for style inspiration.
